<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(255, 255, 255, 1);
        }

        .video {
            position: relative;
            height: 218px;
        }

        .play {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 50px;
            height: 50px;
        }

        .row {
            margin: 15px;
        }

        .line {
            margin: 15px;
            height: 1px;
            background: rgb(214, 214, 214);
            transform: scaleY(0.5);
        }

        .video-title {
            height: fit-content;
            font-size: 18px;
            font-weight: bold;
            color: rgba(34, 34, 36, 1);
            line-height: 27px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .rmb {
            font-size: 13px;
            font-weight: 500;
            color: rgba(255, 92, 1, 1);
            margin-right: 5px;
        }

        .number {
            font-size: 20px;
            font-weight: 600;
            color: rgba(255, 92, 1, 1);
            margin-right: 9px;
        }

        .tips {
            font-size: 13px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .head .key {
            font-size: 15px;
            font-weight: bold;
            color: rgba(25, 25, 25, 1);
        }

        .head .value {
            font-size: 15px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .episodes {
            flex-wrap: nowrap;
            overflow-x: scroll !important;
            height: 55px;
            line-height: 55px;
            text-align: center;
        }

        .episodes-item {
            position: relative;
            width: 55px;
            height: 55px;
            min-width: 55px;
            background: rgba(245, 245, 245, 1);
            border-radius: 5px;
            margin-right: 10px;
        }

        .episodes .index {
            font-size: 18px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .episodes .active {
            font-weight: 500;
            color: rgba(90, 194, 255, 1);
        }

        .episodes .money {
            position: absolute;
            right: 0;
            top: 0;
            max-width: 55px;
            padding: 0 3px;
            background: rgba(255, 170, 94, 1);
            border-radius: 5px;
            height: 14px;
            line-height: 16px;
            font-size: 10px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .description {
            margin-top: 10px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            line-height: 22px;
        }

        .bottom-occupy {
            height: 50px;
        }

        .bottom {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 0px 0px rgba(212, 212, 212, 1);
            padding: 0 10px 0 20px;
            box-sizing: border-box;
        }

        .bottom::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: rgba(212, 212, 212, 1);
            transform: scaleY(0.5);
        }

        .bottom .item {
            width: 24px;
            margin-right: 25px;
            font-size: 10px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 14px;
            padding-bottom: 3px;
        }

        .bottom .item img {
            width: 24px;
            height: 24px;
        }

        .btn {
            width: 112px;
            height: 32px;
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 15px;
            border-radius: 18px;
            margin: 0 5px;
        }

        .blue {
            background: rgba(90, 194, 255, 1);
        }

        .yellow {
            background: rgba(253, 155, 67, 1);
        }

        video {
            display: block;
            width: 100%;
            height: 218px;
            object-fit: fill;
        }

        .footer {
            z-index: 10;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
        }

        .footer img {
            width: 30px;
            height: 30px;
            margin: 0 15px;
        }

        .footer .time {
            min-width: fit-content;
            max-width: fit-content;
            color: #fff;
            font-size: 12px;
            margin-left: 13px;
        }

        .footer .full {
            width: 40px;
            height: 40px;
            margin: 0 8px;
        }

        .progress-box {
            position: relative;
            height: 4px;
            background: rgba(0, 0, 0, 0.48);
            border-radius: 2px;
            overflow: initial;
        }

        .progress {
            background-color: #fff;
            border-radius: 2px;
            width: 0%;
            height: 4px;
        }

        .point {
            position: absolute;
            top: 2px;
            left: 0%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.35);
            box-sizing: content-box;
            transform: translate(-50%, -50%);
        }

        .point::before {
            content: ' ';
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
        }

        .active {
            font-size: 18px;
            font-weight: 500;
            color: rgba(90, 194, 255, 1);
        }

        .comment {
            display: flex;
        }

        .comment img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .comment .avatar {
            overflow: hidden;
            width: 33px;
            height: 33px;
            min-width: 33px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .comment .full {
            flex-grow: 1;
            border-bottom: 1px solid #E7E6E6;
        }

        .comment .justify {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 33px;
            margin-bottom: 10px;
        }

        .comment .justify .start {
            font-size: 14px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
        }

        .comment .justify .end {
            font-size: 12px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .comment .content {
            margin-bottom: 10px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(74, 75, 77, 1);
            line-height: 23px;
        }

        .comment .reply {
            padding: 10px;
            margin-bottom: 10px;
            background: rgba(238, 238, 238, 1);
            border-radius: 4px;
        }

        .comment .reply .head {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .comment .reply .head .avatar {
            min-width: 20px;
            max-width: 20px;
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        .comment .reply .head .name {
            font-size: 12px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .comment .reply .content {
            margin-bottom: 0;
            font-size: 12px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            line-height: 17px;
        }

        .comments-tips {
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .video-tips {
            z-index: 999;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .cover {
            z-index: 989;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: transparent;
        }

        .gratis {
            font-size: 18px;
            font-weight: 500;
            color: rgba(255, 92, 1, 1);
        }

        .valid {
            font-size: 13px;
            font-weight: 400;
            color: #BFBFBF;
            line-height: 13px;
        }

        .btn-activation {
            position: absolute;
            top: 0;
            right: -15px;
            padding-left: 10px;
            padding-right: 10px;
            height: 27px;
            background-color: #FD9B43;
            border-radius: 18px 0px 0px 18px;
            font-size: 13px;
            font-weight: 400;
            line-height: 14px;
            color: #FFFFFF;
        }

        .btn-activation img {
            width: 15px;
            height: 16px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <!-- <div style="height:218px;"></div> -->
        <div class="video">
            <video id="video" preload="meta" x5-playsinline="" playsinline="" webkit-playsinline=""
                :src="video.videoUrl" :poster="video.pic || video.videoUrl + '?x-oss-process=video/snapshot,t_1000,m_fast'" @click="isShow = !isShow">
                <source :src="video.videoUrl" type="video/mp4" />
                <source :src="video.videoUrl" type="video/ogg" />
                <source :src="video.videoUrl" type="video/webm" />
            </video>
            <img class="play" @click="togglePlay" @click.once="saveTrackInfo" v-show="isPlay === false && isEnd === false"
                src="../../image/ui/play.png" alt="">
            <div class="footer" v-show="isShow" data-flex="box:justify cross:center">
                <img @click="togglePlay" :src="isPlay ? '../../image/ui/pause.png' : '../../image/ui/play_4.png'"
                    alt="">
                <div class="progress-box" data-flex-box="1">
                    <div :style="'width:'+ (currentTime/duration*100) +'%'" class="progress"></div>
                    <div :style="'left:'+ (currentTime/duration*100) +'%'" class="point" id="point"></div>
                </div>
                <div class="time">{{ current }}/{{ durations }}</div>
                <img class="full" src="../../image/ui/full.png" alt="" @click="rotateX">
            </div>
            <div class="video-tips" v-show="isEnd" data-flex="main:center cross:center">
                您的试看已结束,请在下方进行购买
            </div>
            <div class="cover" v-show="isEnd"></div>
        </div>
        <div class="row">
            <div class="video-title">{{ video.name }}</div>
        </div>
        <div v-if="videos.point == 1" class="row">
            <div class="gratis">免费</div>
        </div>
        <div v-else-if="videos.termEnd" class="row">
            <div class="valid">课程有效期至:{{formatTime(videos.termEnd, 'date')}}</div>
        </div>
        <div v-else class="row" style="position: relative;overflow: visible;" data-flex="cross:center">
            <div v-if="videos.point == 2" data-flex="cross:center">
                <div class="rmb">¥</div>
                <div class="number">{{ isApplePay ? videos.productPrice : videos.price }}</div>
            </div>
            <div v-else data-flex="cross:center">
                <div class="rmb">积分</div>
                <div class="number">{{ videos.pricePoint }}</div>
            </div>
            <div class="tips">全集购买</div>
            <div class="btn-activation" v-if="videos.active != 1" data-flex="cross:center" @click="openEnterFrm">
                激活码开通视频
                <img src="../../image/ui/ar_white.png" alt="">
            </div>
        </div>
        <div class="line"></div>
        <div class="row">
            <div class="head" data-flex="main:justify cross:center">
                <div class="key">选集</div>
                <div class="value">{{ videos.videos.length }}集全</div>
            </div>
        </div>
        <div class="row">
            <div class="episodes" data-flex="cross:center">
                <div v-for="item,index in videos.videos" class="episodes-item">
                    <div class="index" :class="{'active': currentPlay === index}" @click="currentPlay = index">
                        {{ index + 1 }}
                    </div>
                    <div v-if="videos.activeCode || item.active == 1" class="money">已激活</div>
                    <div v-else-if="videos.point == 2" class="money">¥{{ isApplePay ? item.productPrice : item.price }}</div>
                    <div v-else-if="videos.point == 0" class="money">积分{{ item.pricePoint }}</div>
                </div>
            </div>
        </div>
        <div class="line"></div>
        <div class="row" v-if="video.detailMobileHtml">
            <div class="head" data-flex="main:justify">
                <div class="key">视频介绍</div>
            </div>
        </div>
        <div class="row" v-if="video.detailMobileHtml">
            <div class="description" v-html="video.detailMobileHtml"></div>
        </div>
        <!-- <div class="row">
            <div class="head" data-flex="main:justify">
                <div class="key">视频留言</div>
            </div>
        </div>
        <div class="row" v-if="comments.length < 1">
            <div class="comments-tips">
                当前视频暂时没有评论
            </div>
        </div>
        <div class="row" v-for="item,index in comments">
            <div class="comment">
                <div class="avatar">
                    <img :src="item.icon" alt="">
                </div>
                <div class="full">
                    <div class="justify">
                        <div class="start">{{ item.nickName }}</div>
                        <div class="end" v-if="item.status == 1" @click="deleteCommment(index)">删除</div>
                    </div>
                    <div class="content">
                        {{ item.content }}
                    </div>
                    <div class="reply" v-if="item.sysUserId !== ''">
                        <div class="head">
                            <div class="avatar">
                                <img :src="item.photo" alt="">
                            </div>
                            <div class="name">
                                {{ item.loginName }}
                            </div>
                        </div>
                        <div class="content">
                            {{ item.backContent }}
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <footer class="bottom-occupy"></footer>
        <footer class="bottom" v-if='isShowFooter'  data-flex="cross:center">
            <div class="item" @click="fav">
                <img :src="isFav ? '../../image/ui/collect_4.png' : '../../image/ui/collect_3.png'" alt="">
                收藏
            </div>
            <!-- <div class="item" @click="advisory()">
                <img src="../../image/ui/consult.png" alt="">
                评论
            </div> -->
            <div class="btns" data-flex="main:justify" data-flex-box="1">
                <div class="btn blue" v-if="videos.point == 2 && videos.active != 1" data-flex="main:center cross:center" data-flex-box="1" @click="buy(1)">
                    购买全集
                </div>
                <div class="btn yellow" v-if="videos.point == 2 && video.active != 1" data-flex="main:center cross:center" data-flex-box="1"
                    @click="buy(2)">
                    购买本集
                </div>
                <div class="btn yellow" v-if="videos.point == 1" data-flex="main:center cross:center"
                    data-flex-box="1">
                    免费观看
                </div>
                <div class="btn blue" v-if="videos.point == 0 && videos.active != 1" data-flex="main:center cross:center" data-flex-box="1" @click="buy(1)">
                    积分兑换全集
                </div>
                <div class="btn yellow" v-if="videos.point == 0 && video.active != 1" data-flex="main:center cross:center" data-flex-box="1" @click="buy(2)">
                    积分兑换本集
                </div>
                <div class="btn blue" v-if="videos.active == 1" data-flex="main:center cross:center" data-flex-box="1">
                    已购买
                </div>
                <div class="btn yellow" v-if="videos.active != 1 && video.active == 1" data-flex="main:center cross:center" data-flex-box="1">
                    已购买
                </div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam, video, connectionType;
    var isTouch = false;
    var isBuyCourse = true;
    var tinyPlayer = null;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        pageParam = api.pageParam;
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        // 监听到评论后重新请求api
        api.addEventListener({
            name: 'commentLoad'
        }, function (ret) {
            findComment('headerRefreshing');
        });
        api.addEventListener({
            name:'online'
        }, function(ret, err){
            vm.connectionType = ret.connectionType;
            notWifi();
        });
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            console.log(1);
            tinyPlayer.exitFullScreen();
        });
        // tinyPlayer = api.require("tinyPlayer");
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                isApplePay: fnIsApplePay(), // 是否苹果支付
                // 套集
                videos: {
                    videos: []
                },
                // 视频
                video: {},
                // 当前播放的索引,默认为 0
                currentPlay: 0,
                // 评论
                comments: [],
                // 是否播放, 默认为否
                isPlay: false,
                // 当前播放进度
                currentTime: 0,
                // 视频总时长
                duration: 0,
                // 是否显示控制台, 默认为否
                isShow: true,
                // 试看是否结束
                isEnd: false,
                // 该套集是否已收藏,默认为否
                isFav: false,
                // 是否显示底部, 用来判断数据是否请求完成, 不然会闪动
                isShowFooter: false,
                // 是否许可非WiFi播放
                isLicence: false,
                connectionType: api.connectionType,
                // 视频关联课程名称
                videoCourseName: '',
                // 评论分页
                pageNo: 1,
                pageSize: 10
            },
            watch: {
                isPlay: function () {
                    if (this.isPlay) {
                        video.play();
                        setTimeout(function() {
                            notWifi();
                        }, 0)
                    } else {
                        video.pause();
                    }
                },
                currentPlay: function () {
                    this.isPlay = false;
                    this.isEnd = false;
                    findVideoByProduct();
                },
                currentTime: function () {
                    if (this.videos.point == 1 || this.videos.active == 1 || this.video.active == 1) {
                        return;
                    }
                    if(this.currentTime >= this.video.tryLengthTime) {
                        this.isEnd = true;
                        this.isPlay = false;
                        this.isShow = true;
                    }
                }
            },
            computed: {
                current: function () {
                    var time = parseInt(this.currentTime);
                    var s = time % 60,
                        m = (time - s) / 60;
                    return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
                },
                durations: function () {
                    var time = parseInt(this.duration);
                    var s = time % 60,
                        m = (time - s) / 60;
                    return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
                }
            }
        });
        findVideosByProducts();
        fnGetVideoCourseStatus();
    }

    function notWifi() {
        if(vm.isPlay && vm.connectionType !== 'wifi' && !vm.isLicence) {
            vm.isPlay = false;
            vm.isLicence = false;
            fnOpenAlert({
                alertType: '23',
                alertConfirmFn: 'noWifiConfirmPlay'
            })
        }
    }

    // 点击激活码
    function openEnterFrm() {
        if(USER.Get('custId', true)) {
            if(fnVideoCanActive()) {
                fnOpenFrame({
                    name: 'enter_frm',
                    url: './enter_frm.html',
                    rect: {
                        x: 0, y: 0, w: 'auto', h: 'auto'
                    },
                    bgColor: 'rgba(0,0,0,0.5)',
                    pageParam: {
                        title: '激活码',
                        placeholder: '请输入激活码',
                        winName: api.winName,
                        frameName: api.frameName
                    }
                });
            }
        } else {
            fnToast("登录后才能激活视频");
        }
    }

    // 激活回调
    function fnSubmit(content) {
        var url = 'courseWare/unlockVideoBySeqNum';
        var params = {
            id: pageParam.productsId,
            materialSequenceNum: content
        };
        var callback = function(data) {
            fnToast('激活成功');
            vm.videos.active = 1;
            vm.videos.termEnd = data.termEnd;
            alert("该视频观看有效期将于您的对应学期课本同步");
        };
        POST(url, params, callback);
    }

    // 切换播放状态
    function togglePlay() {
        if(fnVideoCanActive()) {
            vm.isPlay = !vm.isPlay;
        }
    }

    // 非wifi环境确认播放·
    function noWifiConfirmPlay() {
        vm.isPlay = true;
        vm.isLicence = true;
    }

    // 获取视频关联课程的状态
    function fnGetVideoCourseStatus() {
        var params = {
            cpsProductId: pageParam.productsId
        };
        var callback = function(data) {
            if(data.watchStatus == 0) {
                isBuyCourse = false;
            }
            vm.videoCourseName = data.courseName;
        };
        POST('my/isNotWatchVideo', params, callback);
    }

    // 判断视频是否可以播放或者购买
    function fnVideoCanActive() {
        var result = true;
        var custId = USER.Get('custId', true);
        if(!isBuyCourse && custId) {
            result = false;
            fnToast('请先激活课程'+vm.videoCourseName);
        }
        return result;
    }

    // 获取当前套集的数据
    function findVideosByProducts() {
        var params = {
            'productsId': pageParam.productsId
        };
        var url = 'videos/findVideosByProducts';
        var callback = function (data) {
            if(data.code == '4001') {
                fnToast('该套集已下架');
                api.closeWin();
                return;
            }
            vm.videos = data;
            // vm.videos.point = 2;
            vm.isFav = data.fav === 1;
            if(vm.videos.scope != 3) {
                api.execScript({
                    name: api.winName,
                    script: "fnSetBtnInfo('','',false)"
                });
            }
            // 根据上个页面的参数播放指定的集数
            if(pageParam.videoId) {
                for(var i = 0; i < vm.videos.videos.length; i ++) {
                    console.log(vm.videos.videos[i].id, i);
                    if(vm.videos.videos[i].id == pageParam.videoId) {
                        vm.currentPlay = i;
                        pageParam.videoId = '';
                        break;
                    }
                }
            }
            vm.$nextTick(function () {
                findVideoByProduct();
                vm.isShowFooter = true;
            });
        };
        POST(url, params, callback);
    }

    // 根据当前播放的索引获取视频的数据
    function findVideoByProduct() {
        if(vm.videos.videos.length < 1) {
            return;
        }
        var params = {
            'videoProductId': vm.videos.videos[vm.currentPlay].id
        };
        var url = 'videos/findVideoByProduct';
        var callback = function (data) {
            if(vm.videos.active == 1) {
                data.active = '1';
            };
            vm.video = data;
            vm.$nextTick(function () {
                if(vm.video.videoUrl == '') {
                    fnToast('当前这集没有视频');
                } else {
                    videoListener();
                    // fnOpenTP();
                }
                loadComment();
            });
        };
        POST(url, params, callback);
    }

    // 打开视频播放模块
    function fnOpenTP() {
        tinyPlayer.showInView({
            rect:{x:0, y:0,w:'auto', h:218},
            fixedOn:api.frameName,
            fixed:true,
            radius: 0,//圆角大小 默认 0 没有圆角
            showBack: false,//返回按钮是否显示小屏幕
            showSelect: false,//选集按钮是否显示
            showSpeed:true,//倍速按钮是否显示
            showShot:true,//截图按钮是否显示
            showBottomProcess:true,
            autoPlay:true,//默认false
            openCache:true,//是否开启缓存
            hideControl:false,//是否隐藏所有控件
            backgroundHolder: "",//视频背景图片
            backgroundAlpha:0.3,//0 背景透明度
            loop: false,//是否单集循环
            styles: [],
            index:0,
            data:[
                {
                uid:'',//扩展字段 用户id(可选，会随事件返回)
                vid:'',//扩展字段 视频id(可选，会随事件返回)
                title:vm.video.name,
                index:'01',
                thumb: vm.video.videoUrl + "?x-oss-process=video/snapshot,t_1000,m_fast",
                url: vm.video.videoUrl
                }
            ]
        });
    }

    function loadComment() {
        findComment('headerRefreshing');
        // fnAddHeaderRefreshingEvent(function() { //设置下拉刷新
        //     findComment('headerRefreshing');
        // });

        fnAddFooterLoadingEvent(function() { // 设置上拉加载
            findComment('load');
        });

    }

    // 获取到视频的数据之后, 获取视频的评论
    function findComment(sign) {
        return;
        if(sign == 'headerRefreshing') {
            vm.pageNo = 1;
        } else {
            vm.pageNo ++;
        }
        var params = {
            'busnissTypeCode': '1',
            'busnissId': vm.video.id,
            'pageNo': vm.pageNo,
            'pageSize': vm.pageSize
        };
        var url = 'comment/findComment';
        $S.POST(url, params, function(ret) {
            if(ret && ret.status == 200) {
                vm.comments = vm.comments.concat(ret.data.listData);
            } else {
                fnToast('评论获取失败');
            }
        })
    }

    // 删除评论
    function deleteCommment(index) {
        fnOpenAlert({
            alertType: '11',
            alertConfirmFn: 'confirmDelete(' + index + ');'
        })
    }

    // 确认删除
    function confirmDelete(index) {
        var params = {
            'entityName': 'commentRecord',
            'id': vm.comments[index].id
        };
        var url = 'common/deleteById';
        var callback = function (data) {
            vm.comments.splice(index, 1);
            fnToast('删除成功');
        };
        POST(url, params, callback);
    }

    // 获取到视频的数据之后, 注入事件监听
    function videoListener() {
        video = document.getElementById('video');
        video.addEventListener('durationchange', function () {
            vm.duration = this.duration;
        })
        video.addEventListener('timeupdate', function () {
            if(!isTouch) {
                vm.currentTime = this.currentTime;
            }
        });
        video.addEventListener("ended", function () {
            vm.isPlay = false;
        });
        fnAddSliderEvent();
    }

    // 是否登录
    function checkIsLogin(notToLogin) {
        var custId = USER.Get('custId', true);
        if(!custId && !notToLogin) {
            fnOpenWin({
                name: 'login',
                url: '../login/login.html'
            });
        }
        return !!custId;
    }

    // 打开分享页面
    function headerFn() {
        if(checkIsLogin()) {
            fnOpenFrame({
                name: 'share_frm',
                url: '../share.html',
                pageParam: {
                    businessId: pageParam.productsId,
                    scope: pageParam.scope,
                    shareType: 'video',
                    shareTitle: vm.videos.name,
                    sharePage: 'video_detail',
                    thumb: vm.videos.pic,
                    from: 'video',
                    point: vm.videos.point
                }
            });
        }
    }

    // 评论
    function advisory() {
        fnOpenComment(vm.video.id, '1');
    }

    // 横屏
    function rotateX() {
        fnOpenWin({
            name: 'video_horizontal',
            url: './video_horizontal.html',
            pageParam: {
                currentTime: vm.currentTime,
                video: vm.video,
                isPlay: vm.isPlay,
                winName: api.winName,
                frmName: api.frameName,
                point: vm.videos.point,
                active: vm.videos.active
            },
            slidBackEnabled: false
        });
        api.setScreenOrientation({
            orientation: 'landscape_left'
        });
        // 不加该代码视频会有BUG
        vm.isPlay = false;
    }

    // 继续播放
    function resumePlay(time, isPlay) {
        video.currentTime = time;
        vm.isPlay = isPlay;
    }

    // 将套集保存到历史记录
    function saveTrackInfo() {
        if(!checkIsLogin(1)) return;
        var params = {
            'trackTypeCode': '02',
            'bussTableId': pageParam.productsId
        };
        var url = 'apiTrack/saveTrackInfo';
        $S.POST(url, params, function (ret) {
            if(ret && ret.status == 200) {
                if(ret.data.integralValue) {
                    fnToast('恭喜您获得了'+ret.data.integralValue+'积分');
                }
            }
        });
    }

    // 收藏
    function fav() {
        if(checkIsLogin()) {
            if (vm.isFav) {
                var params = {
                    'id': vm.videos.favId,
                    'entityName': 'favoriteInfo'
                };
                var url = 'common/deleteById';
                var callback = function (data) {
                    fnToast('取消收藏成功');
                    vm.isFav = false;
                };
                POST(url, params, callback);
            } else {
                var params = {
                    'bussTableId': pageParam.productsId,
                    'favoriteTypeCode': '02'
                };
                var url = 'apiFavorite/saveFavoriteInfo';
                var callback = function (data) {
                    fnToast('收藏成功');
                    vm.videos.favId = data.favId;
                    vm.isFav = true;
                };
                POST(url, params, callback);
            }
        }
    }

    // 购买
    var isBuyAll = true;
    function buy(arg) {
        var isLogin = checkIsLogin(1);
        if(vm.videos.point == 0 && !isLogin) {
            // 积分视频直接登录
            checkIsLogin();
        }else if(fnVideoCanActive() && isLogin) {
            fnBuyVideo(arg);
        }else if(!isLogin) {
            api.actionSheet({
                title: '购买资源\n\n游客身份下购买视频，仅能供该设备观看视频，一旦更换设备，您的视频将无法观看。',
                cancelTitle: '取消',
                buttons: ['登录账号购买（推荐）', '游客身份购买']
            }, function(ret, err) {
                var index = ret.buttonIndex;
                console.error(index, 'aaaaa');
                if(index == 1) {
                    // 登录
                    checkIsLogin();
                }else if(index == 2) {
                    // 游客购买
                    fnBuyVideo(arg);
                }
            });
        }
    }

    // 购买视频
    function fnBuyVideo(arg) {
        var params = {
            'productsId': pageParam.productsId,
            'isSaveIosPrice': vm.isApplePay && vm.videos.point != 0 ? 1 : 2,
            'isBuyTeacherRecommendVideo': pageParam.from == 'teacherShare' ? 1 : 2
        };
        var url = 'videos/orderProducts';
        isBuyAll = true;
        if(arg == 2) {
            // 购买单集
            url = 'videos/orderVideo';
            params.videoProductId = vm.video.id;
            isBuyAll = false;
        }
        var callback = function (data) {
            var payMethod = 0;
            fnOpenPublicWin('支付详情', 'video/pay',{
                retData: data,
                from: 2,
                refreshWin: api.winName,
                refreshFrm: api.frameName,
                payMethod: vm.videos.point == 0 ? -1 : 0 // -1 积分购买,其他值无意义
            });
        };
        POST(url, params, callback);
    }

    // 支付成功后的回调
    function paySuccessCallback() {
        if(isBuyAll) {
            // 购买全集成功回调
            vm.videos.active = 1;
            vm.video.active = 1;
            vm.isEnd = false;
        }else {
            // 购买单集成功回调
            vm.video.active = 1;
            vm.isEnd = false;
        }
    }

    function fnAddSliderEvent() {
        var startX;
        var startY;
        var currentX;
        var currentY;
        var progressWidth = document.getElementsByClassName('progress-box')[0].clientWidth;
        var point =  document.getElementsByClassName('point')[0];
        point.addEventListener('touchstart', function(event) {
            startX = event.touches[0].clientX;
            startY = event.touches[0].clientY;
            isTouch = true;
        })

        point.addEventListener('touchmove', function(event) {
            var progressBox = document.getElementsByClassName('progress-box')[0];
            // 防止拖动超出进度条
            if(event.touches[0].clientX >= progressBox.offsetLeft && event.touches[0].clientX <= progressBox.offsetLeft + progressWidth - 6) {
                currentX = event.touches[0].clientX;
            }
            currentY = event.touches[0].clientY;
            var distance = currentX - startX;
            startX = currentX;
            if(distance) {
                var time = vm.duration * (distance / progressWidth);
                vm.currentTime = vm.currentTime + time;
                video.currentTime = vm.currentTime;
            }
        })

        point.addEventListener('touchend', function() {
            isTouch = false;
        })
    }
</script>

</html>